/**
 * 即将解锁内容页面
 * 展示用户即将解锁的特殊菜品和贴图故事，显示解锁进度
 */
import React, { useState, useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../../store'
import { identityUtils } from '../../../utils/identityUtils'
import './index.scss'

export default function UpcomingUnlocks() {
  const { state } = useAppContext()
  const { currentUser } = state
  const [upcomingUnlocks, setUpcomingUnlocks] = useState<any>({ specialDishes: [], stickerStories: [] })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (currentUser?.id) {
      loadUpcomingUnlocks()
    }
  }, [currentUser])

  const loadUpcomingUnlocks = async () => {
    try {
      setLoading(true)
      const userId = currentUser?.id || ''
      const intimacy = currentUser?.intimacy || 0
      const identitySubType = currentUser?.identitySubType || ''
      
      const unlocks = await identityUtils.getUpcomingUnlocks(
        userId,
        intimacy,
        identitySubType
      )
      setUpcomingUnlocks(unlocks)
    } catch (error) {
      console.error('加载即将解锁内容失败:', error)
      Taro.showToast({ title: '加载失败', icon: 'error' })
    } finally {
      setLoading(false)
    }
  }

  return (
    <View className='upcoming-unlocks'>
      <View className='header'>
        <Text className='title'>即将解锁</Text>
        <Text className='subtitle'>继续互动增加亲密度来解锁这些内容</Text>
      </View>

      {loading ? (
        <View className='loading'>
          <Text>加载中...</Text>
        </View>
      ) : (
        <ScrollView className='content-list' scrollY>
          {/* 特殊菜品区域 */}
          {upcomingUnlocks.specialDishes.length > 0 && (
            <View className='section'>
              <Text className='section-title'>特殊菜品</Text>
              {upcomingUnlocks.specialDishes.map((dish: any) => (
                <View key={dish.id} className='content-item special-dish'>
                  <Text className='content-icon'>{dish.icon}</Text>
                  <View className='content-info'>
                    <Text className='content-name'>{dish.dishName}</Text>
                    <Text className='content-desc'>{dish.specialStory}</Text>
                    <Text className='content-progress'>
                      还需 {dish.requiredIntimacy - (currentUser?.intimacy || 0)} 亲密度
                    </Text>
                    {/* 解锁进度条 */}
                    <View className='progress-indicator'>
                      <View className='progress-bar'>
                        <View 
                          className='progress-fill' 
                          style={{ 
                            width: `${Math.min(100, ((currentUser?.intimacy || 0) / dish.requiredIntimacy) * 100)}%` 
                          }}
                        />
                      </View>
                      <Text className='progress-text'>
                        {(currentUser?.intimacy || 0)}/{dish.requiredIntimacy}
                      </Text>
                    </View>
                  </View>
                </View>
              ))}
            </View>
          )}

          {/* 贴图故事区域 */}
          {upcomingUnlocks.stickerStories.length > 0 && (
            <View className='section'>
              <Text className='section-title'>贴图故事</Text>
              {upcomingUnlocks.stickerStories.map((story: any) => (
                <View key={story.id} className='content-item sticker-story'>
                  <Text className='content-icon'>{story.icon}</Text>
                  <View className='content-info'>
                    <Text className='content-name'>{story.stickerName}</Text>
                    <Text className='content-desc'>{story.storyContent}</Text>
                    <Text className='content-progress'>
                      还需 {story.requiredIntimacy - (currentUser?.intimacy || 0)} 亲密度
                    </Text>
                    {/* 解锁进度条 */}
                    <View className='progress-indicator'>
                      <View className='progress-bar'>
                        <View 
                          className='progress-fill' 
                          style={{ 
                            width: `${Math.min(100, ((currentUser?.intimacy || 0) / story.requiredIntimacy) * 100)}%` 
                          }}
                        />
                      </View>
                      <Text className='progress-text'>
                        {(currentUser?.intimacy || 0)}/{story.requiredIntimacy}
                      </Text>
                    </View>
                  </View>
                </View>
              ))}
            </View>
          )}

          {/* 空状态 - 当已经解锁所有内容时显示 */}
          {upcomingUnlocks.specialDishes.length === 0 && upcomingUnlocks.stickerStories.length === 0 && (
            <View className='empty-state'>
              <Text className='empty-icon'>🎉</Text>
              <Text className='empty-text'>太棒了！</Text>
              <Text className='empty-desc'>您已经解锁了所有内容</Text>
            </View>
          )}
        </ScrollView>
      )}

      {/* 亲密度获取提示 */}
      <View className='intimacy-tips'>
        <Text className='tips-title'>如何增加亲密度？</Text>
        <Text className='tips-item'>• 每次点餐 +2 亲密度</Text>
        <Text className='tips-item'>• 评价菜品 +1 亲密度</Text>
        <Text className='tips-item'>• 分享菜品 +1 亲密度</Text>
        <Text className='tips-item'>• 每日登录 +1 亲密度</Text>
        <Text className='tips-item'>• 特殊节日 +15 亲密度</Text>
      </View>
    </View>
  )
} 